<template>
    <view>
        <view class="list-cell" hover-class="uni-list-cell-hover" @click="bindClick">
            <view class="media-list">
                <view class="li title">{{data.matName}}<view class="corner">{{data.stocknum}}</view></view>
				<view class="li" v-if="data.matUnit">单位:{{data.matUnit}}</view>
				<view class="li" v-else>单位:暂无</view>
				<view class="li" v-if="data.lgpla">仓位:{{data.lgpla}}</view>
				<view class="li" v-else>仓位:暂无</view>
				<view class="li" v-if="data.barcode">条码编号:{{data.barcode}}</view>
				<view class="li" v-else>条码编号:暂无</view>
				<view class="li" v-if="data.matNo">物料编号：{{data.matNo}}</view>
				<view class="li" v-else>物料编号:暂无</view>
				<view class="li" v-if="data.lotno">批次编号：{{data.lotno}}</view>
				<view class="li" v-else>批次编号:暂无</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['data'],
        computed: {
            
        },
        methods: {
            bindClick() {
                this.$emit('click');
            }
        }
    }
</script>

<style scoped="scoped" lang="scss">
    view {
        display: flex;
        box-sizing: border-box;
		font-size: 14px;
    }

    .list-cell {
        width: 750upx;
        padding: 0 30upx;
    }

    .uni-list-cell-hover {
        background-color: #eeeeee;
    }

    .media-list {
        flex: 1;flex-direction: column;border-bottom-width: 1upx;border-bottom-style: solid;border-bottom-color: #c8c7cc;padding: 20upx 0;
		.title{
			font-size: 16px;font-weight: bold; display: flex; align-items: center;color:black!important;
			.corner{
				margin-left: 10px; padding: 0px 15px;background: #009BDE;border-radius: 10px;height: 20px;line-height: 20px;color: white;
			}
		}
		.li{
			width: 100%;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;letter-spacing: 2px;color: #666; 
		}
	}

</style>
